<template>
    <div
        ref="containerTarget"
        class="group relative p-0.5 rounded-xl border-white dark:border-zinc-200 duration-500 hover:bg-red-100/40"
    >
        <div>
            <!-- 搜索图标 -->
            <m-svg-icon
                name="search"
                color="#707070"
                class="w-1.5 h-1.5 absolute translate-y-[-50%] top-[50%] left-2"
            ></m-svg-icon>
            <!-- 输入框 -->
            <input
                type="text"
                placeholder="搜索"
                class="block w-full h-[44px] pl-4 text-sm outline-0 bg-zinc-100 dark:bg-zinc-800 caret-zinc-400 rounded-xl text-zinc-900 dark:text-zinc-200 tracking-wide font-semibold border border-zinc-100 dark:border-zinc-700 duration-500 group-hover:bg-white dark:group-hover:bg-zinc-900 group-hover:border-zinc-200 dark:group-hover:border-zinc-700 focus:border-red-300"
                v-model="model"
                @keyup.enter="onSearchHandler"
                @focus="onFocusHandler"
                @blur="onBlurHandler"
            />
            <!-- 删除按钮 -->
            <m-svg-icon
                v-show="model"
                name="input-delete"
                color="#707070"
                @click="onClearClick"
                class="w-1.5 h-1.5 absolute translate-y-[-50%] top-[50%] right-9 cursor-pointer duration-500"
            ></m-svg-icon>

            <!-- 分割线 -->
            <div class="opacity-0 h-1.5 w-[1px] absolute translate-y-[-50%] top-[50%] right-[62px] duration-500 bg-zinc-200 group-hover:opacity-100"></div>
            <!-- 搜索按钮 -->
            <m-button
                icon="search"
                iconColor="#ffffff"
                @click="onSearchHandler"
                class="opacity-0 absolute translate-y-[-50%] top-[50%] right-1 rounded-full duration-500 group-hover:opacity-100"
            ></m-button>
        </div>

        <!-- 下拉区域 -->
        <transition name="slide">
            <div
                v-if="$slots.dropdown"
                v-show="isFocus"
                class="max-h-[368px] w-full text-base overflow-auto bg-white dark:bg-zinc-800 absolute z-20 left-0 top-[56px] p-2 rounded border border-zinc-200 dark:border-zinc-600 duration-200 hover:shadow-2xl"
            >
                <slot name="dropdown" />
            </div>
        </transition>
    </div>
</template>
<script>
// 触发搜索（点击或回车）事件
const EMIT_SEARCH = 'search'
// 删除所有文本事件
const EMIT_CLEAR = 'clear'
// 输入事件
const EMIT_INPUT = 'input'
// 获取焦点事件
const EMIT_FOCUS = 'focus'
// 失去焦点事件
const EMIT_BLUR = 'blur'
</script>

<script setup>
import { ref, watch } from 'vue'
//点击指定元素之外的
import { onClickOutside } from '@vueuse/core'

/**
 * 1、输入内容实现双向绑定
 * 2、搜索按钮在hover时展示
 * 3、一键清空文本功能
 * 4、触发搜索
 * 5、控制下来展示区的展示
 * 6、事件的处理
 */

const emits = defineEmits([EMIT_SEARCH, EMIT_CLEAR, EMIT_INPUT, EMIT_FOCUS, EMIT_BLUR])

//1、输入内容实现双向绑定
const model = defineModel()
watch(model, (val) => {
    emits(EMIT_INPUT, val) //input事件
})

//3、一键清空文本功能
const onClearClick = () => {
    model.value = ''
    emits(EMIT_CLEAR, '') //clear事件
}
// 4、触发搜索
const onSearchHandler = () => {
    emits(EMIT_SEARCH, model.value) //search事件
}

//input 是否获取到焦点
const isFocus = ref(false)
const onFocusHandler = () => {
    isFocus.value = true
    emits(EMIT_FOCUS) //focus事件
}

//失去焦点的时候
const onBlurHandler = () => {
    emits(EMIT_BLUR) //blur事件
}

//点击指定元素在之外的焦点
const containerTarget = ref(null)
onClickOutside(containerTarget, () => {
    isFocus.value = false
})
</script>

<style lang="scss" scope>
.slide-enter-active,
.slide-leave-active {
    transition: all 0.5s;
}
.slide-enter-from,
.slide-leave-to {
    opacity: 0;
    transform: translateY(40px);
}
</style>
